<template>
	<view class="wrap">
		<view class="search">
			<u-search v-model="this.queryForm.materialName" placeholder="请输入物料名称或编码进行搜索" @custom="search"
				@search="search"></u-search>
		</view>
		<swiper class="swiper-box">
			<swiper-item class="swiper-item" @touchmove.stop>
				<scroll-view scroll-y style="height: 100%;width: 100%;" enable-back-to-top="true"
					@scrolltolower="reachBottom" :refresher-enabled="true" :refresher-triggered="refresherTriggered"
					@refresherrefresh="refresherrefresh">
					<view>
						<view class="slot-card" v-for="(item, index) in materialList" :key="index">
							<!--@click="redirectMaterialInfo(item.materialId) -->
							<view class="materialName">
								<u-text :text="item.materialName" color="#00aaff" :bold="true" size="20"
									style="padding-bottom: 10rpx;"></u-text>
							</view>
							<u-line></u-line>
							<view class="materialInfo">
								<view class="img">
									<u-image src="/static/images/currentInventory.png" width="80" height="80"
										:radius="10"></u-image>
								</view>
								<view class="info">
									<u-text :text="`商品编码: ${item.materialCode}`" size="16" :bold="true"></u-text>
									<u-text :text="`商品规格: ${item.standard == null ? '' : item.standard}`" size="16"
										:bold="true"></u-text>
									<u-text :text="`库存数量: ${item.amount} ${item.unitName}`" size="16"
										:bold="true"></u-text>
									<u-text :text="`可用数量: ${item.availableAmount} ${item.unitName}`" size="16"
										:bold="true"></u-text>
								</view>
							</view>
						</view>
						<u-loadmore :status="loadStatus" bgColor="#f2f2f2"></u-loadmore>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>

</template>

<script>
	import {
		getMaterialList
	} from '@/api/location/location.js'
	export default {
		data() {
			return {
				materialList: [],
				loadStatus: 'noMore',
				loadMaterialList: false,
				refresherTriggered: false,
				_refresherTriggered: false,
				queryForm: {
					locationId: '',
					materialName: '',
					pageNum: 1,
					pageSize: 10,
				},
			}
		},
		onLoad: function(options) {
			let url = decodeURIComponent(options.q)
			let query = this.GetWxMiniProgramUrlParam(url);
			this.queryForm.locationId = query.locationId;
			this.getMaterialList()
		},
		methods: {
			GetWxMiniProgramUrlParam(options) {
				let theRequest = {};
				if (options.indexOf("#") != -1) {
					const str = options.split("#")[1];
					const strs = str.split("&");
					for (let i = 0; i < strs.length; i++) {
						theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
					}
				} else if (options.indexOf("?") != -1) {
					const str = options.split("?")[1];
					const strs = str.split("&");
					for (let i = 0; i < strs.length; i++) {
						theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
					}
				}
				return theRequest;
			},

			search(value) {
				this.materialList = []
				this.queryForm.materialName = value
				this.getMaterialList()
			},

			getMaterialList() {
				this.loadStatus = "loading"
				if (!this.loadMaterialList) {
					this.loadMaterialList = true;
				}
				getMaterialList(this.queryForm).then(response => {
					for (let i = 0; i < response.rows.length; i++) {
						this.materialList.push(response.rows[i])
					}
					if (response.rows.length == 10) {
						this.loadMaterialList = false
						this.loadStatus = "loadmore"
					} else {
						this.loadMaterialList = true
						this.loadStatus = "nomore"
					}
				});
			},

			reachBottom() {
				if (!this.loadMaterialList) {
					this.queryForm.pageNum += 1;
					this.getMaterialList();
				} else {
					this.loadStatus = "nomore"
				}
			},
			refresherrefresh() {
				if (this._refresherTriggered) {
					return;
				}
				this._refresherTriggered = true;
				//界面下拉触发，triggered可能不是true，要设为true
				if (!this.refresherTriggered) {
					this.refresherTriggered = true;
				}
				this.loadStoreData();
			},
			loadStoreData() {
				this.queryForm.pageNum = 1
				this.materialList = []
				this.getMaterialList();
				setTimeout(() => {
					this.refresherTriggered = false; //触发onRestore，并关闭刷新图标
					this._refresherTriggered = false;
				}, 1000)
			},
			onPullDownRefresh() {
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},
		}
	}
</script>

<style lang="scss">
	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
		background-color: #f5f5f5;
	}

	.search {
		padding: 20rpx 20rpx 0;
		height: 105rpx;
		background: #ffffff;
	}

	.text-area {
		margin-top: 80rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: center;
	}

	.materialInfo {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15rpx 5rpx 15rpx 5rpx;

		.img {
			width: 30%;
		}

		.info {
			width: 70%;
		}
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}

	.slot-card {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 40rpx;
		font-size: 34rpx;
		color: $u-content-color;
	}
</style>